<template>
  <div>
    <ex-dialog width="950px" class="ex-diolog" :title="title" :visible="visible" @closeDialog="handleClose">
      <div class="tabs-body">
        <div class="modify">
          <el-form :inline="true" :rules="rules" :model="formInline" :label-width="labelWidth" ref="formInline"
            class="demo-form-inline">
            <el-form-item label="开通板块：" prop="applyFunction" :label-width="labelWidth" key="1">
              <el-select v-model="formInline.applyFunction" placeholder="请选择" :disabled="pathType == 'edit'"
                :style="{ width: inputWidth }">
                <el-option label="资金板块" value="1"></el-option>
                <el-option label="神椰板块" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="店铺头像：" prop="shopIcon" :label-width="labelWidth" ref="shopIconRef" key="2">
              <ImageUploadMore :limit="1" :fileSize="20" @successImg="getShopIconImg"
                :value="formInline.shopIcon">
              </ImageUploadMore>
            </el-form-item>
            <el-form-item label="店铺名称：" prop="shopName" :label-width="labelWidth" key="3">
              <el-input v-model="formInline.shopName" placeholder="请输入店铺名称" :style="{ width: inputWidth }"></el-input>
            </el-form-item>
            <el-form-item label="店铺类型：" required prop="shopType" :label-width="labelWidth" key="4">
              <!-- el-input表单校验占位用，不显示 -->
              <el-input v-model="formInline.shopType" :disabled="true" v-show="false"
                :style="{ width: inputWidth }"></el-input>
              <!--  -->
              <el-cascader v-model="avalue" :options="typeLs" :show-all-levels="false" @change="handleChange"
                :style="{ width: inputWidth }">
              </el-cascader>
            </el-form-item>
            <el-form-item label="店铺经纬度坐标：" prop="lntLatStr" :label-width="labelWidth" key="3">
              <el-input v-model="formInline.lntLatStr" placeholder="请输入经纬度坐标" :style="{ width: inputWidth }"></el-input>
              <el-button type="primary" @click="guUrl()"  style="margin-left: 20px;">获取经纬度坐标</el-button>
            </el-form-item>
            <!-- <el-form-item label="店铺定位：" prop="locateAddress" :label-width="labelWidth" key="5">
              <span class="fontsize">{{ formInline.locateAddress }}</span>
              <el-input v-model="formInline.locateAddress" :disabled="true" v-show="false"
                :style="{ width: inputWidth }"></el-input>
              <span class="fontsize" @click="modelMsg = true"
                style="color: #1890ff; margin-left: 30px; cursor: pointer">点击定位地址</span>
            </el-form-item> -->
            <el-form-item label="详细地址：" prop="address" :label-width="labelWidth" key="6">
              <el-input v-model="formInline.address" placeholder="请输入详细地址" :style="{ width: inputWidth }"></el-input>
            </el-form-item>

            <el-form-item label="营业时间：" required :label-width="labelWidth">
              <el-col :span="12">
                <el-form-item prop="startTime" key="7">
                  <el-time-select v-model="formInline.startTime" placeholder="开始时间" :picker-options="{
                    start: '00:00',
                    step: '00:10',
                    end: '23:59',
                  }">
                  </el-time-select>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="1">-</el-col>
              <el-col :span="11">
                <el-form-item prop="endTime" key="8">
                  <el-time-select v-model="formInline.endTime" placeholder="结束时间" :picker-options="{
                    start: '00:00',
                    step: '00:10',
                    end: '23:59',
                  }">
                  </el-time-select>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="营业日期：" required prop="weekTime" :label-width="labelWidth" key="9">
              <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
              </el-checkbox>
              <el-input v-model="formInline.weekTime" placeholder="请输入店铺名称" v-show="false"></el-input>
              <div style="margin: 15px 0"></div>
              <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                <el-checkbox v-for="dayItem in cities" :label="dayItem" :key="dayItem">{{
                  dayItem
                }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="神椰店铺类型：" required prop="shenyeType" :label-width="labelWidth"
              v-if="formInline.applyFunction == 2" key="10">
              <el-select v-model="formInline.shenyeType" placeholder="请选择" :style="{ width: inputWidth }">
                <el-option v-for="item in shopTypeList" :key="item.id" :label="item.value" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="神椰店铺行业：" required prop="shenyeIndustryId" :label-width="labelWidth"
              v-if="formInline.applyFunction == 2" key="11">
              <el-select v-model="formInline.shenyeIndustryId" placeholder="请选择" :style="{ width: inputWidth }">
                <el-option v-for="item in shenyeIndustryList" :key="item.id" :label="item.value" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="企业类别：" prop="merchantType" :label-width="labelWidth" key="16">
              <el-select v-model="formInline.merchantType" placeholder="请选择" @change="merchantTypeChange"
                :style="{ width: inputWidth }">
                <el-option v-for="item in merchantTypeList" :key="item.id" :label="item.value" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <!-- 资金板块 -->
            <div v-if="formInline.applyFunction == 1">
              <el-form-item label="营业执照：" prop="businessLicenseImg" :label-width="labelWidth" ref="businessLicenseImg"
                key="12">
                <el-checkbox-group v-model="formInline.businessLicenseImg" v-show="false"></el-checkbox-group>
                <ImageUploadMore :limit="1" :fileSize="20" v-model="formInline.businessLicenseImg"
                  @successImg="getBusinessLicenseImg"> </ImageUploadMore>
              </el-form-item>
              <el-form-item label="统一信用社代码：" prop="businessLicenseNumber" :label-width="labelWidth" key="13">
                <el-input v-model="formInline.businessLicenseNumber" placeholder="请输入统一信用社代码"></el-input>
              </el-form-item>
              <el-form-item label="企业名称：" prop="merchantName" :label-width="labelWidth" key="14">
                <el-input v-model="formInline.merchantName" placeholder="请输入企业名称"></el-input>
              </el-form-item>
              <el-form-item label="注册地址：" prop="merchantAddress" :label-width="labelWidth" key="15">
                <el-input v-model="formInline.merchantAddress" placeholder="请输入注册地址"></el-input>
              </el-form-item>

              <el-form-item label="注册资金：" prop="registeredFund" :label-width="labelWidth"
                v-if="formInline.merchantType == 1" key="17">
                <el-input v-model="formInline.registeredFund" placeholder="请输入注册资金" @input="checkUnit">
                  <template slot="append" v-if="moneyUnit">{{ moneyUnit }}</template>
                </el-input>
              </el-form-item>
              <!-- <el-form-item label="签约手机号：" prop="phone" :label-width="labelWidth">
                  <el-input v-model="formInline.phone" placeholder="请输入签约手机号"></el-input>
              </el-form-item> -->
              <el-form-item label="选择结算方式：" prop="settleBankType" :label-width="labelWidth" key="18">
                <el-select v-model="formInline.settleBankType" placeholder="请选择">
                  <el-option label="对公" value="1"></el-option>
                  <el-option label="对法人私卡" value="2"></el-option>
                  <!-- <el-option  label="对非法人私卡" value="3"></el-option> -->
                </el-select>
              </el-form-item>
              <el-form-item label="法人身份信息：" required :label-width="labelWidth">
                <el-row>
                  <el-col :span="12">
                    <el-form-item prop="frontOfIdCard" key="19">
                      <div style="display:flex;align-items:center;flex-direction:column;">
                        <el-checkbox-group v-model="formInline.frontOfIdCard" v-show="false"></el-checkbox-group>
                        <ImageUploadMore :limit="1" :fileSize="20" v-model="formInline.frontOfIdCard"
                          :isShowTip="false" @successImg="getFrontOfIdCard"> </ImageUploadMore>
                        <span>正面</span>
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop="backOfIdCard" key="20">
                      <div style="display:flex;align-items:center;flex-direction:column;">
                        <el-checkbox-group v-model="formInline.backOfIdCard" v-show="false"></el-checkbox-group>
                        <ImageUploadMore :limit="1" :fileSize="20" v-model="formInline.backOfIdCard"
                          :isShowTip="false" @successImg="getBackOfIdCard"> </ImageUploadMore>
                        <span>反面</span>
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="法人姓名：" prop="legalPerson" :label-width="labelWidth" key="21">
                <el-input v-model="formInline.legalPerson" placeholder="请输入法人姓名"></el-input>
              </el-form-item>
              <el-form-item label="法人身份证号：" prop="legalPersonId" :label-width="labelWidth" key="22">
                <el-input v-model="formInline.legalPersonId" placeholder="请输入法人身份证号"></el-input>
              </el-form-item>
              <el-form-item label="身份证有效期：" prop="legalPersonIdCardValidDate" :label-width="labelWidth" key="23">
                <el-input v-model="formInline.legalPersonIdCardValidDate" placeholder="请输入身份证有效期"
                  :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="开户许可证：" prop="permitForBankAccount" :label-width="labelWidth"  ref="permitForBankAccountRef"
                v-if="formInline.settleBankType == 1" key="24">
                <el-checkbox-group v-model="formInline.permitForBankAccount" v-show="false"></el-checkbox-group>
                <ImageUploadMore :limit="1" :fileSize="20" v-model="formInline.permitForBankAccount" @successImg="getPermitForBankAccount"
                  :isShowTip="false"> </ImageUploadMore>
              </el-form-item>
              <el-form-item label="银行卡信息：" required :label-width="labelWidth" v-if="formInline.settleBankType == 2"
                key="25">
                <el-row>
                  <el-col :span="12">
                    <el-form-item prop="bankCard" key="26">
                      <div style="display:flex;align-items:center;flex-direction:column;">
                        <el-checkbox-group v-model="formInline.bankCard" v-show="false"></el-checkbox-group>
                        <ImageUploadMore :limit="1" :fileSize="20" v-model="formInline.bankCard" :isShowTip="false"
                          @successImg="getBankCard"> </ImageUploadMore>
                        <span>正面</span>
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop="bankCardBack" key="27"  ref="bankCardBackRef">
                      <div style="display:flex;align-items:center;flex-direction:column;">
                        <el-checkbox-group v-model="formInline.bankCardBack" v-show="false"></el-checkbox-group>
                        <ImageUploadMore :limit="1" :fileSize="20" v-model="formInline.bankCardBack"  @successImg="getBankCardBack"
                          :isShowTip="false"> </ImageUploadMore>
                        <span>反面</span>
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="开户名称：" prop="settleName" :label-width="labelWidth" key="28">
                <el-input v-model="formInline.settleName" placeholder="请输入开户名称"></el-input>
              </el-form-item>
              <el-form-item label="银行名称：" prop="accountName" :label-width="labelWidth" key="29">
                <el-input v-model="formInline.accountName" placeholder="请输入银行名称"
                  :disabled="formInline.bankRegionAvalue.length == 0 ? false : true"></el-input>
                <el-tooltip class="item" effect="dark" content="如需更改开银行名称，请先删除银行地区" placement="top-start"
                  v-if="formInline.bankRegionAvalue.length != 0">
                  <div class="el-icon-question" style="color: red;margin-left: 10px;cursor: pointer"></div>
                </el-tooltip>
              </el-form-item>
              <el-form-item label="开户行卡号：" prop="accountNo" :label-width="labelWidth" key="30">
                <el-input v-model="formInline.accountNo" placeholder="请输入开户行卡号"></el-input>
              </el-form-item>
              <el-form-item label="银行地区：" prop="bankRegionAvalue" :label-width="labelWidth" key="31">
                <!-- <el-checkbox-group v-model="formInline.bankCity" v-show="false"></el-checkbox-group> -->
                <el-cascader :options="bankRegionOptions" :props="{ value: 'id', label: 'label', children: 'children' }"
                  filterable @change="bankRegionChange" v-model="formInline.bankRegionAvalue" clearable>
                </el-cascader>
              </el-form-item>
              <el-form-item label="所属开户支行：" :label-width="labelWidth" prop="bankCode" key="32">
                <el-select v-model="formInline.bankCode" placeholder="请选择" @change="changesTwo">
                  <el-option v-for="item in bankOptiontwo" :key="item.bankCode" :label="item.bankName"
                    :value="item.bankCode">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="银行预留手机号：" prop="bankMobile" :label-width="labelWidth"
                v-if="formInline.settleBankType == 2" key="33">
                <el-input v-model="formInline.bankMobile" placeholder="请输入银行预留手机"></el-input>
              </el-form-item>
            </div>
            <!-- end -->
            <el-form-item label="所属区域" required prop="province" :label-width="labelWidth" key="34">
              <!-- el-input表单校验占位用，不显示 -->
              <el-input v-model="formInline.province" :disabled="true" v-show="false"
                :style="{ width: inputWidth }"></el-input>
              <!--  -->
              <el-cascader :options="regionOptions" filterable
                :props="{ value: 'id', label: 'label', children: 'children' }" v-model="regionAvalue"
                @change="regionChange" :style="{ width: inputWidth }"></el-cascader>
            </el-form-item>
            <el-form-item label="邀请人：" :label-width="labelWidth" key="35">
              <el-select v-model="formInline.referrer" placeholder="请选择" :style="{ width: inputWidth }">
                <el-option v-for="item in referrerList" :key="item.id" :label="item.value" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="店铺联系电话：" :label-width="labelWidth" key="36">
              <el-input v-model="formInline.contactPhone" placeholder="请输入店铺联系电话"
                :style="{ width: inputWidth }"></el-input>
            </el-form-item>
            <el-form-item label="品牌介绍：" :label-width="labelWidth" key="37">
              <el-input type="textarea" v-model="formInline.introduce" placeholder="请输入" maxlength="300"
                show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="商家资质：" :label-width="labelWidth" :key="formInline.applyFunction == 1?38:39" :prop="formInline.applyFunction == 1?'competencyImgList':''" >
              <el-checkbox-group v-model="formInline.competencyImgList" v-show="false"></el-checkbox-group>
              <ImageUploadMore :limit="6" :fileSize="20" @successImg="getCompetencyImgList" :value="formInline.competencyImgList" ></ImageUploadMore>
              <!-- <ImageUploadMore :limit="6" :fileSize="20" @successImg="getCompetencyImgList" v-model="formInline.competencyImgList" ></ImageUploadMore> -->
              <div>({{ formInline.competencyImgList.length }}/6)</div>
            </el-form-item>
            <el-form-item label="店铺图片：" :label-width="labelWidth" key="40">
              <!-- <div class="img_list">
                <div class="img_box" v-for="(item, index) in formInline.shopImgList" :key="index">
                  <div class="closeimg el-icon-circle-close" @click="detailImg(index)"></div>
                  <img :src="item" alt="" />
                </div>
                <el-upload v-if="formInline.shopImgList.length < 10" class="avatar-uploader2" :action="action"
                  :show-file-list="false" :on-success="listAvatarSuccess" :before-upload="beforeAvatarUpload"
                  :multiple="true" :limit="limit">
                  <i class="el-icon-plus" style="font-size: 28px"></i>
                </el-upload>
              </div> -->
              <ImageUploadMore :limit="10" :fileSize="20" @successImg="getShopImgList"
                :value="formInline.shopImgList">
              </ImageUploadMore>
              <div>({{ formInline.shopImgList.length }}/10)</div>
            </el-form-item>
            <!-- <el-form-item label="商家合同确认书：" prop="enterFile" :label-width="labelWidth" ref="enterFileRef">
              <el-upload class="upload-demo" :action="action" :on-preview="handlePreview" :on-remove="handleRemove"
                :before-remove="beforeRemove" multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList" :on-success="handleUploadSuccess">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </el-form-item> -->
            <!-- <el-form-item class="btn">

            </el-form-item> -->
            <template v-if="formInline.applyFunction == 2">
              <p style="margin: 10px 0;">结算信息</p>
              <el-form-item label="赚卡服务费：" prop="equityFee" key="50">
                <el-input v-model="formInline.equityFee" placeholder="请输入" :style="{ width: inputWidth }">
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
              <el-form-item label="结算方式：" prop="">
                <el-select filterable v-model="formInline.settleBankType" placeholder="请选择" clearable
                  :style="{ width: inputWidth }">
                  <el-option v-for="item in settleBankTypeLs" :key="item.id" :label="item.value" :value="item.id" />
                </el-select>
              </el-form-item>
              <template v-if="formInline.settleBankType != ''">
                <el-form-item label="开户名称：" prop="settleName" key="51">
                  <el-input v-model="formInline.settleName" placeholder="请输入" :style="{ width: inputWidth }"></el-input>
                </el-form-item>
                <el-form-item label="银行名称：" prop="accountName" key="52">
                  <el-input v-model="formInline.accountName" placeholder="请输入" :style="{ width: inputWidth }"></el-input>
                </el-form-item>
                <el-form-item label="开户行卡号：" prop="accountNo" key="53">
                  <el-input v-model="formInline.accountNo" placeholder="请输入" :style="{ width: inputWidth }"></el-input>
                </el-form-item>
                <el-form-item label="所属开户行：" prop="bankName" key="54">
                  <el-input v-model="formInline.bankName" placeholder="请输入" :style="{ width: inputWidth }"></el-input>
                </el-form-item>
                <el-form-item label="开户许可证：" prop="permitForBankAccount" ref="permitForBankAccountRef"
                  v-if="formInline.settleBankType == 1" key="55">
                  <ImageUploadMore :limit="1" :fileSize="20" @successImg="getPermitForBankAccount"
                    :value="formInline.permitForBankAccount">
                  </ImageUploadMore>
                </el-form-item>
                <el-form-item label="银行预留手机号：" prop="bankMobile" key="56">
                  <el-input v-model="formInline.bankMobile" maxlength="11" placeholder="请输入" :style="{ width: inputWidth }"></el-input>
                </el-form-item>
                <el-form-item label="银行卡正面：" prop="nfrSettleBankImg" ref="nfrSettleBankImgRef"
                  v-if="formInline.settleBankType != 1" key="57">
                  <ImageUploadMore :limit="1" :fileSize="20" @successImg="getNfrSettleBankImg"
                    :value="formInline.nfrSettleBankImg">
                  </ImageUploadMore>
                </el-form-item>
                <el-form-item label="银行卡反面：" prop="nfrSettleBankImgBack" ref="nfrSettleBankImgBackRef"
                  v-if="formInline.settleBankType != 1" key="58">
                  <ImageUploadMore :limit="1" :fileSize="20" @successImg="getNfrSettleBankImgBack"
                    :value="formInline.nfrSettleBankImgBack">
                  </ImageUploadMore>
                </el-form-item>
                <el-form-item label="法人授权函信息：" prop="settleAuthorization" ref="settleAuthorizationRef"
                  v-if="formInline.settleBankType == 3" key="59">
                  <ImageUploadMore :limit="1" :fileSize="20" @successImg="getSettleAuthorization"
                    :value="formInline.settleAuthorization">
                  </ImageUploadMore>
                </el-form-item>
              </template>
            </template>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="btn">
        <el-button type="primary" style="margin-right: 30px" @click="submitForm('formInline')"
          :loading="buttonLoading">保存提交</el-button>
        <!-- <el-button type="primary" @click="getSave">保存</el-button> -->
        <el-button @click="handleClose">取消</el-button>
      </div>
    </ex-dialog>
    <el-dialog title="选择定位" :visible.sync="modelMsg">
      <div class="msgDiv">
        <el-autocomplete style="width: 80%; margin-right: 10px" class="inline-input" v-model="address"
          :fetch-suggestions="watchInput" placeholder="请输入内容" :trigger-on-focus="false" @select="handleSelect">
        </el-autocomplete>
        <div id="container" style="margin-top: 20px"></div>
        <div class="dialog_bottom">
          <el-button style="margin-right: 60px" @click="modelMsg = false">取消</el-button>
          <el-button type="primary" @click="determine">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// api
import {
  getDetail,
  approved,
  reject
} from '@/api/regitserVerify'
import {
  shopTypeTree,
  addHlb,
  getCity
} from "@/api/clientManagement";

import {
  licenseInfo,
  idCardInfo,
  bankInfo
} from "@/api/chainManagement";
import {
  getBankCity,
  getBankBranch,
} from "@/api/merchants";
import {
  referrer,
  addMerchant,
  industrySelect,
  refuseMerchantDetail,
  editMerchant,
} from "@/api/merchants/merchantsAudit";
import ImageUploadMore from "@/components/ImageUploadMore"
import { toThousandFilter } from '@/filters';
export default {
  name: "shopDetail",
  components: {
    ImageUploadMore
  },
  props: {
    visible: Boolean,
    id: String,
    pathType: String,
    userData: Object,
  },

  data() {
    var checkWeekTime = (rule, value, callback) => {
      console.log('value是', value)
      if (!value) {
        return callback(new Error('请选择每周营业日'));
      } else {
        callback();
      }
    };
    var checkShopType = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请选择店铺类型'));
      } else {
        callback();
      }
    };
    var checkProvince = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请选择所属区域'));
      } else {
        callback();
      }
    };
    var checkNum = (rule, value, callback) => {
      if (value < 0) {
        return callback(new Error('只可填写数值（0-100），可保留两位小数'));
      } else if (value > 100) {
        return callback(new Error('只可填写数值（0-100），可保留两位小数'));
      } else {
        callback();
      }
    };
    return {
      title: '新增店铺',
      labelWidth: '140px',
      inputWidth: '300px',
      buttonLoading: false,
      avalue: [],
      fileList: [],
      ImgDetailDialog: false,
      modelMsg: false, //显示模态框
      address: "", //输入的地址
      mapList: [], //用来存搜索到的所有地址
      mapVal: "", //创建的地图，赋值用
      fileType: [],
      action: process.env.VUE_APP_BASE_API + "/common/v1/uploadFile",
      loading: false,
      shopTypeList: [
        { id: '1', value: '平台' },
        // { id: '2', value: '第三方' }
      ],
      bankRegionOptions: [], //银行城市数组
      bankRegionAvalue: [], //银行城市选择回显
      bankOptiontwo: [], //支行
      settleBankTypeLs: [],//结算方式字典
      regionAvalue: [],
      merchantTypeList: [],//企业类型列表
      bankNameList: [],//所属开户支行
      moneyUnit: '',//企业资金数
      formInline: {
        applyFunction: '2', //开通板块
        account: '',//	注册手机号
        password: '',//设置密码
        shopIcon: "", //店铺头像
        shopName: "", //店铺名称
        shopType: "", //店铺子类型
        shopTypeParent: "", //店铺父类型
        shopTypeName: "", //店铺子类型名称
        shopLnt: "", //店铺经度
        shopLat: "", //店铺纬度
        address: "", //详细地址
        lntLatStr: '',//店铺经纬度字符串
        locateAddress: "", //定位地址
        status: "", //店铺状态 1 用户端展示  2 用户端不展示  字典：merchant_shop_spurious_status
        shopImgList: [], //店铺图片
        competencyImgList: [], //资质图片
        startTime: "", //开始时间
        endTime: "", //结束时间
        weekTime: "", //每周营业日
        contactPhone: "", //店铺联系电话
        introduce: "", //品牌介绍
        province: '', //省
        city: '', //市
        area: '', //区
        shenyeIndustryId: '',
        shenyeType: '',//神椰店铺类型
        referrer: '',
        // 资金板块
        businessLicenseImg: '',//营业执照
        businessLicenseNumber: '',//统一信用社代码
        merchantAddress: '',//注册地址
        merchantName: '',//注册名称
        merchantType: '',//企业类型
        registeredFund: '',//注册资金
        // phone:'',//签约手机号
        settleBankType: '',//选择结算方式
        frontOfIdCard: '',//法人身份信息正面
        backOfIdCard: '',//法人身份信息反面
        legalPerson: '',//法人姓名
        legalPersonId: '',//法人身份证号
        legalPersonIdCardValidDate: '',//身份证有效期
        permitForBankAccount: '',//开户许可证
        bankCard: '',//银行卡信息正面
        bankCardBack: '',//银行卡信息反面
        settleName: '',//开户名称
        accountName: '',//银行名称
        accountNo: '',//开户行卡号
        bankName: '',//所属开户支行
        bankMobile: '',//银行预留手机号
        bankProvince: '',//银行省
        bankCity: '',//银行市
        bankCode: '',//银盛code
        bankRegionAvalue: [],//银行城市选择回显
        // end
        equityFee: '',//赚卡服务费
        isSkip: '1',//是否跳过结算信息录入，1跳过，2不跳过
        nfrSettleBankImg: '',//nfr结算银行正面图片
        nfrSettleBankImgBack: '',//	nfr结算银行背面图片
        settleAuthorization: '',//法人/非法人结算授权书

      },

      rules: {
        applyFunction: [{
          required: true,
          message: '请选择开通板块',
          trigger: 'change'
        }],
        shopIcon: [{
          required: true,
          message: '请上传店铺头像',
          trigger: 'change'
        }],
        shopName: [{
          required: true,
          message: '请输入店铺名称',
          trigger: ['blur', 'change']
        }],
        address: [{
          required: true,
          message: '请输入详细地址',
          trigger: ['blur', 'change']
        }],
        shopType: [{
          required: true,
          message: '请选择店铺类型',
          trigger: ['blur', 'change']
        }],
        startTime: [{
          required: true,
          message: '请选择开始时间',
          trigger: ['blur', 'change']
        }],
        endTime: [{
          required: true,
          message: '请选择结束时间',
          trigger: ['blur', 'change']
        }],
        weekTime: [{
          validator: checkWeekTime,
          trigger: 'change'
        }],
        lntLatStr: [{
          required: true,
          message: '请输入经纬度',
          trigger: ['blur', 'change']
        }],
        locateAddress: [{
          required: true,
          message: '请选择店铺定位',
          trigger: ['blur', 'change']
        }],
        shopType: [{
          validator: checkShopType,
          trigger: 'change'
        }],
        shenyeType: [{
          required: true,
          message: '请选择神椰店铺类型',
          trigger: 'change'
        }],
        shenyeIndustryId: [{
          required: true,
          message: '请选择神椰店铺行业',
          trigger: 'change'
        }],
        province: [{
          validator: checkProvince,
          trigger: 'change'
        }],
        enterFile: [{
          required: true,
          message: '请上传商家合同确认书',
          trigger: 'change'
        }],
        // 资金板块
        businessLicenseImg: [{
          required: true,
          message: '请上传营业执照',
          trigger: 'change'
        }],
        businessLicenseNumber: [{
          required: true,
          message: '请输入统一信用社代码',
          trigger: 'blur'
        }],
        merchantName: [{
          required: true,
          message: '请输入企业名称',
          trigger: 'blur'
        }],
        merchantAddress: [{
          required: true,
          message: '请输入注册地址',
          trigger: 'blur'
        }],
        merchantType: [{
          required: true,
          message: '请选择企业类别',
          trigger: 'change'
        }],
        registeredFund: [{
          required: true,
          message: '请输入注册资金',
          trigger: 'blur'
        }],
        // phone: [{
        //   required: true,
        //   message: '请输入签约手机号',
        //   trigger: 'blur'
        // }],
        settleBankType: [{
          required: true,
          message: '请选择结算方式',
          trigger: 'change'
        }],
        frontOfIdCard: [{
          required: true,
          message: '请上传法人身份信息正面',
          trigger: 'change'
        }],
        backOfIdCard: [{
          required: true,
          message: '请上传法人身份信息反面',
          trigger: 'change'
        }],
        legalPerson: [{
          required: true,
          message: '请输入法人姓名',
          trigger: ['blur', 'change']
        }],
        legalPersonId: [{
          required: true,
          message: '请输入法人身份证号',
          trigger: ['blur', 'change']
        }],
        legalPersonIdCardValidDate: [{
          required: true,
          message: '请输入身份证有效期',
          trigger: ['blur', 'change']
        }],
        permitForBankAccount: [{
          required: true,
          message: '请上传开户许可证',
          trigger: 'change'
        }],
        bankCard: [{
          required: true,
          message: '请上传银行卡信息正面',
          trigger: 'change'
        }],
        bankCardBack: [{
          required: true,
          message: '请上传银行卡信息反面',
          trigger: 'change'
        }],
        settleName: [{
          required: true,
          message: '请输入开户名称',
          trigger: 'blur'
        }],
        accountName: [{
          required: true,
          message: '请输入银行名称',
          trigger: ['blur', 'change']
        }],
        accountNo: [{
          required: true,
          message: '请输入开户行卡号',
          trigger: ['blur', 'change']
        }],
        bankRegionAvalue: [{
          required: true,
          message: '请选择银行地区',
          trigger: ['blur', 'change']
        }],
        bankCode: [{
          required: true,
          message: '请选择所属开户支行',
          trigger: ['blur', 'change']
        }],
        bankMobile: [{
          required: true,
          message: '请输入银行预留手机号',
          trigger: 'blur'
        }],
        // end
        equityFee: [
          { required: true, message: '请输入赚卡服务费', trigger: ['change', 'blur'] },
          {
            pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: '只可填写数值（0-100），可保留两位小数'
          },
          { validator: checkNum }
        ],
        bankName: [{
          required: true,
          message: '请选择所属开户行',
          trigger: ['blur', 'change']
        }],
        nfrSettleBankImg: [{
          required: true,
          message: '请上传银行卡正面',
          trigger: 'change'
        }],
        nfrSettleBankImgBack: [{
          required: true,
          message: '请上传银行卡反面',
          trigger: 'change'
        }],
        settleAuthorization: [{
          required: true,
          message: '请上传法人授权函',
          trigger: 'change'
        }],
      },
      typeLs: [],
      regionOptions: [], //城市数组
      value: true,
      checkAll: false,
      checkedCities: [],
      cities: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      isIndeterminate: false,
      referrerList: [],//邀请人列表
      shenyeIndustryList: [],//神椰店铺行业列表
    };
  },
  watch: {
    //监听模态框是否显示,显示就执行初始化地图方法
    modelMsg(newVal, oldVal) {
      console.log(newVal);
      if (newVal == true) {
        this.initMap(20.049818248, 110.354108124);
      }
    },
  },
  created() {
    this.getTypels();
    this.getCity();
    this.getDict();
    this.getBankCitys();
    console.log('aaaa', this.pathType)
    this.getReferrer()
    this.getIndustrySelect()
    if (this.pathType == 'edit') {
      this.title = '编辑店铺'
      this.getDetail()
    } else if (this.pathType == 'add') {
      this.title = '新增店铺'
      this.formInline.account = this.userData.account
      this.formInline.password = this.userData.password
    }
  },
  mounted() {

  },
  methods: {
    //获取字典
    getDict() {
      var dictType = "merchant_merchant_type,manage_settle_bank_type";
      this.$getSelectList(dictType)
        .then((res) => {
          this.merchantTypeList = res.result[0].dictList;
          this.settleBankTypeLs = res.result[1].dictList;
          this.settleBankTypeLs.splice(3, 3);
        })
        .finally(() => {

        });
    },

    //获取支行信息
    getBankBranchs() {
      const params = {
        bankName: this.formInline.accountName,
        cityId: this.formInline.bankCity,
        provinceId: this.formInline.bankProvince
      };
      // this.viewLoading = true
      getBankBranch(params).then((res) => {
        this.bankOptiontwo = res.result
        // this.viewLoading = false
      })
        .catch(() => {
          // this.viewLoading = false;
        });
    },
    getBankCitys() { //中台查询银行银盛城市
      let params = {}
      getBankCity(params).then((res) => {
        this.bankRegionOptions = res.result;
        this.bankRegionOptions.forEach((item) => {
          item.children.forEach((items) => {
            if (items.children.length == 0) {
              items.children = null
            }
          })
        })
      });
    },
    //银行区域选择
    bankRegionChange(value) {
      if (value.length == 0) {
        this.formInline.bankRegionAvalue = []
        this.formInline.bankCode = '';
        this.formInline.bankName = '';
        this.bankOptiontwo = []
        return
      }
      this.formInline.bankProvince = value[0];
      this.formInline.bankCity = value[1];
      if (this.formInline.accountName == '') {
        this.$message.error('请输入银行名称');
        this.formInline.bankRegionAvalue = []
        this.formInline.bankProvince = '';
        this.formInline.bankCity = '';
        this.formInline.bankCode = '';
        this.formInline.bankName = '';
        this.bankOptiontwo = []
        return
      } else {
        this.getBankBranchs()
      }
      this.formInline.bankCode = '';
      this.formInline.bankName = '';
    },
    changesTwo(id) {
      //支行选择
      console.log(id)
      this.bankOptiontwo.map((item, index) => {
        if (id == item.bankCode) {
          this.formInline.bankCode = item.bankCode;
          this.formInline.bankName = item.bankName;
        }
      });
    },
    //企业类别选择
    merchantTypeChange(e) {
      this.formInline.settleBankType = ''
      if (e == 1) {
        this.settleBankTypeLs.splice(2, 1);
      } else {
        this.getDict()
      }
    },
    // 上传营业执照
    getBusinessLicenseImg(e) {
      if (e != '') {
        this.formInline.businessLicenseImg = e
        var params = {
          url: e
        }
        licenseInfo(params).then(res => {
          console.log(res)
          var {
            address, businessLicenseNumber, merchantType, merchantName
          } = res.result
          this.formInline.merchantAddress = address
          this.formInline.merchantName = merchantName
          this.formInline.businessLicenseNumber = businessLicenseNumber
          this.formInline.merchantType = merchantType
          // this.formInline.legalPerson = name
        })

      } else {

      }
    },
    // 上传银行卡信息正面
    getBankCard(e) {
      if (e != '') {
        this.formInline.bankCard = e
        var params = {
          url: e
        }
        bankInfo(params).then(res => {
          var {
            bankName, cardNo
          } = res.result
          this.formInline.accountName = bankName
          this.formInline.accountNo = cardNo
        })
      } else {

      }
    },
    getBankCardBack(e){
      this.formInline.bankCardBack = e
      this.$refs['bankCardBackRef'].clearValidate();
    },
    // 上传身份证正面
    getFrontOfIdCard(e) {
      if (e != '') {
        this.formInline.frontOfIdCard = e
        var params = {
          url: e
        }
        idCardInfo(params).then(res => {
          var {
            idCard, name
          } = res.result
          this.formInline.legalPerson = name
          this.formInline.legalPersonId = idCard
        })
      } else {

      }
    },
    // 上传身份证反面
    getBackOfIdCard(e) {
      if (e != '') {
        this.formInline.backOfIdCard = e
        var params = {
          url: e
        }
        idCardInfo(params).then(res => {
          var {
            idCardValidDate
          } = res.result
          this.formInline.legalPersonIdCardValidDate = idCardValidDate
        })
      } else {

      }
    },
    //校验钱数
    checkUnit(val) {
      var unitArr = ['', '', '', '千', '万', '十万', '百万', '千万', '亿']
      if (val.length > 9) {
        this.moneyUnit = unitArr[8]
      } else {
        this.moneyUnit = unitArr[val.length - 1]
      }
    },
    //开户许可证
    getPermitForBankAccount(e) {
      this.formInline.permitForBankAccount = e
      this.$refs['permitForBankAccountRef'].clearValidate();
    },
    //开户银行卡正面
    getNfrSettleBankImg(e){
      this.formInline.nfrSettleBankImg = e
      this.$refs['nfrSettleBankImgRef'].clearValidate();
    },
    //开户银行反面
    getNfrSettleBankImgBack(e){
      console.log('eeeeeeeeeee',e)
      this.formInline.nfrSettleBankImgBack = e
      this.$refs['nfrSettleBankImgBackRef'].clearValidate();
    },
    //法人授权函
    getSettleAuthorization(e){
      this.formInline.settleAuthorization = e
      this.$refs['settleAuthorizationRef'].clearValidate();
    },
    //获取基本信息
    getDetail() {
      refuseMerchantDetail(this.id).then((res) => {
        console.log("获取详情", res);
        const { result } = res;
        if (result.merchantType == 1) { //类型为企业时不可选择非法人私卡
          this.settleBankTypeLs.splice(2, 1);
        }
        this.formInline = result
        this.address = result.locateAddress;
        // 选择结算方式
        if (this.formInline.settleBankType == 1) {
          this.formInline.bankCard = ''
          this.formInline.bankCardBack = ''
          this.formInline.bankMobile = ''
        } else {
          this.formInline.permitForBankAccount = ''
        }
        // 处理店铺类型回显
        let value = [];
        value.push(result.shopTypeParent);
        value.push(result.shopType);
        value.join(",");
        this.avalue = value;
        //处理所属区域回显
        let regionAvalue = [];
        regionAvalue.push(result.province);
        regionAvalue.push(result.city);
        regionAvalue.push(result.area);
        regionAvalue.join(",");
        console.log('regionAvalue', regionAvalue)
        this.regionAvalue = regionAvalue;
        this.formInline.province = result.province
        this.formInline.city = result.city
        this.formInline.area = result.area
        // 处理营业日期
        if (this.formInline.weekTime == '周一至周日') {
          this.checkAll = true
          this.checkedCities = this.cities
        } else {
          var singleTime = ''
          singleTime = this.formInline.weekTime.split('、')
          this.isIndeterminate = singleTime.length > 0 && singleTime.length < this.cities.length;
          this.checkedCities = singleTime
        }

        //处理所属区域回显
        if (result.bankProvince != '') {

          this.formInline.bankRegionAvalue = []
          this.formInline.bankRegionAvalue.push(result.bankProvince);
          this.formInline.bankRegionAvalue.push(result.bankCity);
          this.formInline.bankRegionAvalue.join(",");
          // this.bankRegionAvalue = bankRegionAvalue;
          this.formInline.bankProvince = result.bankProvince;
          this.formInline.bankCity = result.bankCity
          // this.getBank();
          this.getBankBranchs();
        } else {
          this.formInline.bankRegionAvalue = []
          this.formInline.bankProvince = result.bankProvince;
          this.formInline.bankCity = result.bankCity
        }
        // result.shopImgs.forEach((item, ind) => {
        //   item = this.$IMG_URL + "/" + item;
        //   result.shopImgs[ind] = item;
        // });
      });
    },
    //获取邀请人下拉
    getReferrer() {
      var params = {}
      referrer(params).then(res => {
        this.referrerList = res.result
      })
    },
    //获取神椰行业
    getIndustrySelect() {
      var params = {}
      industrySelect(params).then(res => {
        this.shenyeIndustryList = res.result
      })
    },

    getShopIconImg(e) { //店铺头像
      console.log(e)
      this.formInline.shopIcon = e
      this.$refs['shopIconRef'].clearValidate();
    },

    cancel() {
      //取消
      this.$router.go(-1);
    },

    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cities : [];
      this.isIndeterminate = false;
      console.log(val);
      console.log(this.checkedCities);
      if (val == true) {
        this.formInline.weekTime = "周一至周日";
      } else {
        this.formInline.weekTime = "";
      }
      console.log(this.formInline.weekTime);
    },
    handleCheckedCitiesChange(value) {
      console.log(value)
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
      console.log(this.checkedCities);
      let dataone = this.checkedCities.join("、");
      if (dataone == "") {
        this.formInline.weekTime = "";
      } else if (dataone == "周一、周二、周三、周四、周五、周六、周日") {
        this.formInline.weekTime = "周一至周日";
      } else {
        this.formInline.weekTime = dataone;
      }
      console.log(this.formInline.weekTime);
    },
    handleSelect(item) { //地图搜索
      console.log(item);
      this.initMap(item.location.lat, item.location.lng);
      this.formInline.shopLnt = item.location.lng;
      this.formInline.shopLat = item.location.lat;
    },
    determine() { ////地图搜索确定
      console.log(this.address);
      this.formInline.locateAddress = this.address;
      this.modelMsg = false;
    },
    watchInput(queryString, cb) {
      console.log(queryString);
      const KEY = "IFRBZ-GZ2CQ-YHW5J-GSUGE-RC7VS-JBBWN";
      let url = "https://apis.map.qq.com/ws/place/v1/suggestion";
      let keyword = queryString; //传入的关键词
      this.$jsonp(url, {
        key: KEY,
        region: "全国",
        keyword: keyword,
        output: "jsonp",
      })
        .then((res) => {
          let opt = [];
          res.data.forEach((res) => {
            let opt1 = {
              value: res.title + "-" + res.address,
              location: res.location,
            };
            opt.push(opt1);
          });
          this.mapList = opt;
          console.log(this.mapList);
          // 调用 callback 返回建议列表的数据
          cb(this.mapList);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    initMap(lat, lng) {
      //如果地图存在，就销毁，下面会重新创建一个
      if (this.mapVal) {
        this.mapVal.destroy();
      }
      //定义地图中心点坐标
      //this.$nextTick是等Dom加载完再执行
      this.$nextTick(() => {
        var center = new window.TMap.LatLng(lat, lng);
        //定义map变量，调用 TMap.Map() 构造函数创建地图
        this.mapVal = new TMap.Map(document.getElementById("container"), {
          center: center, //设置地图中心点坐标
          zoom: 17.2, //设置地图缩放级别
          pitch: 43.5, //设置俯仰角
          rotation: 45, //设置地图旋转角度
          viewMode: "2D",
          mapStyleId: "style1", //个性化样式
        });
        //初始化marker
        var marker = new TMap.MultiMarker({
          id: "marker-layer", //图层id
          map: this.mapVal,
          styles: {
            //点标注的相关样式
            marker: new TMap.MarkerStyle({
              width: 25,
              height: 35,
              anchor: {
                x: 16,
                y: 32,
              },
              src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png",
            }),
          },
          geometries: [{
            //点标注数据数组
            id: "demo",
            styleId: "marker",
            position: new TMap.LatLng(lat, lng),
            properties: {
              title: "marker",
            },
          },],
        });
      });
    },
    regionChange(value) { //城市区域选择
      this.formInline.province = value[0];
      this.formInline.city = value[1];
      this.formInline.area = value[2];
    },
    getCity() { //查询城市数据
      const params = {};
      getCity(params)
        .then((res) => {
          this.regionOptions = res.result;
          this.regionOptions.forEach((item) => {
            item.children.forEach((items) => {
              items.children.forEach((itemss) => {
                if (itemss.children.length == 0) {
                  itemss.children = null
                }
              })
            })
          })
        })
        .finally(() => { });
    },
    // 获取店铺类型
    getTypels() {
      //shopTypeTree
      this.loading = true;
      shopTypeTree()
        .then((res) => {
          let ls = [];
          ls = this.getTreeData(res.result);
          // console.log(this.typeLs)
          let ls1 = ls.map((item) => {
            item.value = item.id;
            item.children.map((items) => {
              items.value = items.id;
            });
            return item;
          });
          this.typeLs = ls1;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleChange(value) { //店铺类型选择
      console.log(this.avalue);
      let _this = this;
      _this.formInline.shopType = value[1];
      _this.formInline.shopTypeParent = value[0]
      console.log(this.typeLs)
      this.typeLs.forEach((item) => {
        item.children.forEach((nav) => {
          if (nav.id == _this.formInline.shopType) {
            _this.formInline.shopTypeName = nav.label
          }
        })
      })
    },
    getTreeData(data) {
      // 循环遍历json数据
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          // data[i].children=undefined;
          delete data[i].children;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
    getCompetencyImgList(e) { //店铺资质图片
      // var reg1 = new RegExp("https://bee.xiaodaiyan.com", "g"); // 加'g'，删除字符串里所有的"a"
      // e = e.replace(reg1, "");
      if (e != '') {
        this.formInline.competencyImgList = e.split(",")
      } else {
        this.formInline.competencyImgList = []
      }
    },
    getShopImgList(e) { //店铺图片上传
      console.log('e', e)
      if (e != '') {
        this.formInline.shopImgList = e.split(",")
      } else {
        this.formInline.shopImgList = []
      }
    },
    getEnterFile(e) { //合同确认文件
      console.log(e)
      this.formInline.enterFile = e
      this.$refs['enterFileRef'].clearValidate();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.formInline.enterFile = ''
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleUploadSuccess(res) {
      this.formInline.enterFile = res.result.url
      this.$refs['enterFileRef'].clearValidate();
    },
    //上一步
    previousStep() {
      this.$emit('previousStep')
    },

    handleClose() {
      this.$emit('update:visible', false)
    },
    sumitAdd() {
      console.log(data)

    },
    submitForm(formName) {
      // console.log('this.formInline--', this.formInline)
      // return ;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.buttonLoading = true
          if (this.formInline.settleBankType == '' || this.formInline.settleBankType == undefined) {
            this.formInline.isSkip = '1'
          } else {
            this.formInline.isSkip = '2'
          }

          if (this.pathType == 'add') {
            var data = {
              ...this.formInline
            }
            // 选择结算方式
            if (data.settleBankType == 1) {
              data.bankCard = ''
              data.bankCardBack = ''
              data.bankMobile = ''
            } else {
              data.permitForBankAccount = ''
            }
            addMerchant(data).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                });
                this.$emit('success')
                this.handleClose()
                this.buttonLoading = false
              }
            }).catch(() => {
              this.buttonLoading = false
            })
          } else if (this.pathType == 'edit') {
            var data = {
              ...this.formInline
            }
            // 选择结算方式
            if (data.settleBankType == 1) {
              data.bankCard = ''
              data.bankCardBack = ''
              data.bankMobile = ''
            } else {
              data.permitForBankAccount = ''
            }
            editMerchant(data).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                });
                this.$emit('success')
                this.handleClose()
                this.buttonLoading = false
              }
            }).catch(() => {
              this.buttonLoading = false
            })
          }


        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //跳转经纬度查询地址
    guUrl(){
      window.open('https://lbs.qq.com/tool/getpoint/get-point.html', '_blank')
    },
  },
};
</script>
<style lang="scss" scoped>
// .ex-diolog {
//   ::v-deep .ex--dialog--footer {
//     border: none !important;
//   }
//   .grid-layout {
//     width: 560px;
//     margin: 0 auto;
//   }
//   .img {
//     display: block;
//     width: 100px;
//     height: auto;
//   }
// }
.merchantsId {
  color: #303133;
  font-size: 15px;
  margin-bottom: 16px;
}

.tabs-body {
  background-color: #fff;
  padding: 20px 0;
}

.text_ls {
  display: flex;
  align-items: center;
  min-height: 36px;
  line-height: 36px;
  margin: 5px 0;
}

.ls_left {
  font-size: 15px;
  color: #333333;
  width: 200px;
  text-align: right;
}

.ls_right {
  font-size: 15px;
  color: #333333;
  display: flex;
  align-items: center;
}

.ls_bottom {
  padding-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

.avatar-uploader {
  border: 1px dashed #d9d9d9;
}

.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}

.avatar {
  width: 148px;
  height: 148px;
  display: block;
}

.el-form-item {
  display: flex;
}

.el-input {
  width: 300px;
}

.modify ::v-deep.el-textarea__inner {
  width: 500px !important;
  height: 90px;
}

.btn {
  display: flex;
  justify-content: center;
}

.fontsize {
  font-size: 15px;
}

.modify {
  padding: 10px 0px;
}

.dialog_bottom {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.rig_img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 4px;
}

.avatar-uploader2 {
  width: 148px;
  height: 148px;
  text-align: center;
  line-height: 148px;
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  margin-bottom: 12px;
}

.closeimg {
  position: absolute;
  top: 0px;
  right: 0;
  z-index: 99;
  font-size: 28px;
  cursor: pointer;
  background: #4e4e4e;
}

.img_box {
  width: 148px;
  height: 148px;
  margin-right: 12px;
  margin-bottom: 12px;
  border-radius: 4px;
  position: relative;
}

.img_list {
  display: flex;
  align-items: center;
  flex: 1;
  flex-wrap: wrap;
}

.img_list img {
  border-radius: 4px;
  width: 100%;
  height: 100%;
}

.img_list::v-deep .avatar-uploader2 .el-upload {
  width: 100% !important;
}

.line {
  padding-left: 4px;
}

.el-dialog {
  z-index: 9999;
}
</style>
